<template>
  <div class="login">
    <Header left="arrow" title=""></Header>
    <Tip :value="loginMode"></Tip>
    <InputGroup :mode="loginMode"></InputGroup>
    <div class="change" @click="changeWay">使用{{currentMode}}登录</div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import Tip from "../../components/login/Tip";
import InputGroup from "../../components/login/InputGroup";

export default {
  components: {
    Header,
    Tip,
    InputGroup
  },
  data() {
    return {
      loginMode: "手机号",
      currentMode: "邮箱"
    };
  },
  computed: {},
  methods: {
    changeWay() {
      if (this.loginMode == "手机号") {
        this.loginMode = "邮箱地址";
        this.currentMode = "手机号";
      } else {
        this.loginMode = "手机号";
        this.currentMode = "邮箱";
      }
    }
  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 0.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.change {
  color: #d6a266;
  margin-left: 0.45rem;
}
</style>